<template>
  <div class="body">
    <div class="restop">
      <div class="result" v-for="item in topList" :key="item.id">
        <div class="resTitle">{{item.upTheme}}</div>
        <div class="resNum">
          {{item.upMonthValue}}
          <span
            class="dateNum"
            v-if="item.upTheme == '月申请新增金额' || item.upTheme == '月授信新增金额'"
          >万</span>
          <span class="dateNum" v-else>项</span>
        </div>
        <div class="rate">
          <div class="rateFont">
            月环比
            <span>{{item.upMonthSub}}</span>
            <img :src="picList" :class="(parseFloat(item.upMonthSub) < 0)? 'transformPic':''" />
          </div>
          <div class="rateFont1">
            日环比
            <span class="rateNum">{{item.upDaySub}}</span>
            <img :src="picList" :class="(parseFloat(item.upDaySub) < 0)? 'transformPic':''" />
          </div>
        </div>
        <div class="line"></div>
        <div class="dateNum">
          {{item.downTheme}}
          <span class="datePad">{{item.upDayValue}}</span>
          <span v-if="item.downTheme == '日申请金额新增' || item.downTheme == '日授信金额新增'">万</span>
          <span v-else>项</span>
        </div>
      </div>
    </div>
    <div class="work">待办任务</div>
    <div class="workImg">
      <div v-for="item in middleList" class="workFlex" :key="item.id" @click="tapToPage(item.path)">
        <div>
          <img :src="item.url" />
        </div>
        <div>
          <div class="font">{{item.title}}</div>
          <div class="number">{{item.num}}</div>
        </div>
        <img class="picIcon" :src="picList2" />
      </div>
    </div>
    <div class="count">
      <div class="countTotal">
        <div class="font cursor" :class="{'color': isChange}" @click="applyShow()">申请统计</div>
        <div class="cursor" :class="{'color': !isChange}" @click="creitShow()">授信统计</div>
      </div>
    </div>
    <div class="echartLine" v-if="isChange">
      <applyChart></applyChart>
      <moneyChart></moneyChart>
    </div>
    <div class="echartLine" v-if="!isChange">
      <creditChart></creditChart>
      <creditMoneyChart></creditMoneyChart>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import applyChart from "./applyChart.vue";
import moneyChart from "./moneyChart.vue";
import creditChart from "./creditChart.vue";
import creditMoneyChart from "./creditMoneyChart.vue";
import { monthResult, taskAgent, statistic } from "@/api/system/user";
export default {
  components: {
    applyChart,
    moneyChart,
    creditChart,
    creditMoneyChart
  },
  data() {
    return {
      topList: [],
      middleList: [
        {
          title: "待审核订单",
          num: null,
          url: require("../assets/images/home1.png"),
          path: "/business/check/list"
        },
        {
          title: "待授信订单",
          num: null,
          url: require("../assets/images/home2.png"),
          path: "/business/ahc/map"
        },
        {
          title: "待放款订单",
          num: null,
          url: require("../assets/images/home3.png"),
          path: "/business/loan/map"
        },
        {
          title: "贷后预警信号",
          num: null,
          url: require("../assets/images/home4.png"),
          path: "/afterloan/information"
        }
      ],
      picList: require("../assets/images/redUp.png"),
      picList2: require("../assets/images/rightIcon.png"),
      isChange: true,
      charts: "",
      opinionData: ["3", "2", "4", "4", "5"]
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getTopInfo();
      this.getWork();
      // this.getBottomInfo(1)
    },
    getWork() {
      this.listLoading = true;
      taskAgent().then(response => {
        this.middleList[0].num = response.auditingCount;
        this.middleList[1].num = response.approveCount;
        this.middleList[2].num = response.loanCount;
        this.middleList[3].num = response.warnCount;
        this.listLoading = false;
      });
    },
    getTopInfo() {
      this.listLoading = true;
      monthResult().then(response => {
        this.topList = response;
        this.listLoading = false;
      });
    },
    tapToPage(path) {
      this.$router.push({ path: path });
    },
    // getBottomInfo(tabId) {
    //   let params = {
    //     flag: tabId,
    //   }
    //   this.listLoading = true
    //   statistic(params).then(response => {
    //       // this.topList = response
    //       this.listLoading = false
    //     }
    //   )
    // },
    applyShow() {
      this.isChange = true;
    },
    creitShow() {
      this.isChange = false;
    },
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // data: ['近七日收益']
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["0", "2", "3", "4", "5"]
        },
        yAxis: {
          name: "申请数（笔）",
          nameTextStyle: {
            color: "#000",
            fontSize: 18,
            padding: [0, 0, 0, 60]
          }
          // type: 'value'
        },

        series: [
          {
            // name: '近七日收益',
            type: "line",
            // stack: '总量',
            data: this.opinionData,
            lineStyle: {
              // 线条样式 => 必须使用normal属性
              normal: {
                color: "#409EFF"
              }
            }
          }
        ]
      });
    },
    drawLine2(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // data: ['近七日收益']
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["0", "2", "3", "4", "5"]
        },
        yAxis: {
          name: "申请金额（万元）",
          nameTextStyle: {
            color: "#000",
            fontSize: 18,
            padding: [0, 0, 0, 90]
          }
          // type: 'value'
        },

        series: [
          {
            // name: '近七日收益',
            type: "line",
            // stack: '总量',
            data: this.opinionData,
            lineStyle: {
              // 线条样式 => 必须使用normal属性
              normal: {
                color: "#409EFF"
              }
            }
          }
        ]
      });
    }
  },
  beforeDestroy() {
    // document.querySelector('body').setAttribute('style', 'background:#fff')
  }
};
</script>
<style scoped>
.body {
  background: #eee;
}
.restop {
  display: flex;
  justify-content: space-around;
}
.result {
  width: 22%;
  height: 150px;
  background: #fff;
  margin-top: 24px;
  margin-bottom: 24px;
}
.resTitle {
  font-size: 14px;
  color: #8492a6;
  letter-spacing: 0;
  padding-top: 16px;
  margin-left: 16px;
}
.resNum {
  font-size: 24px;
  color: #303133;
  letter-spacing: 0;
  margin-top: 4px;
  margin-left: 16px;
}
.rate {
  display: flex;
  justify-content: space-between;
  margin-left: 16px;
  margin-top: 12px;
  margin-left: 16px;
  margin-bottom: 12px;
}
.rateFont {
  font-size: 14px;
  color: #303133;
  /* margin-right: 24px; */
  position: relative;
}
.rateFont1 {
  font-size: 14px;
  color: #303133;
  margin-right: 24px;
  position: relative;
}
.rateFont1 img {
  position: absolute;
  top: 7px;
  margin-left: 4px;
}
.rateFont img {
  position: absolute;
  top: 7px;
  margin-left: 4px;
}
.rateNum {
  /* margin-left: 12px; */
  /* margin-right: 8px; */
}
.line {
  margin-left: 16px;
  margin-right: 16px;
  width: 90%;
  background: #dcdfe6;
  height: 1px;
  margin-bottom: 12px;
}
.dateNum {
  margin-left: 16px;
  font-size: 14px;
  color: #303133;
  /* position: relative;
    bottom: 0; */
}
.datePad {
  margin-left: 8px;
}
.work {
  height: 48px;
  background: #fff;
  margin-left: 24px;
  margin-right: 24px;
  padding-top: 13px;
  padding-left: 16px;
  font-size: 16px;
  color: #303133;
  border-bottom: 1px solid #dcdfe6;
}
.workImg {
  height: 96px;
  background: #fff;
  margin-left: 24px;
  margin-right: 24px;
  display: flex;
  justify-content: space-between;
}
.workImg img {
  width: 40px;
  height: 40px;
  margin-top: 28px;
  margin-left: 32px;
  margin-right: 24px;
}
.workImg .font {
  font-size: 14px;
  color: #8492a6;
  padding-top: 20px;
  padding-bottom: 10px;
}
.workFlex .picIcon {
  width: 13px;
  height: 18px;
  margin: 20px 18px;
}
.workImg .number {
  font-size: 24px;
  color: #303133;
}
.workFlex {
  display: flex;
  width: 25%;
  position: relative;
  cursor: pointer;
}
.workFlex :before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 1px;
  height: 70%;
  background-color: #eee;
}
.count {
  margin-top: 24px;
  height: 48px;
  background: #fff;
  margin-left: 24px;
  margin-right: 24px;
  font-size: 16px;
  color: #303133;
  border-bottom: 1px solid #dcdfe6;
}
.countTotal {
  display: flex;
  margin-left: 16px;
  padding-top: 13px;
}
.count .font {
  margin-right: 40px;
  padding-bottom: 16px;
}
.color {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}
.cursor {
  cursor: pointer;
}
.echartLine {
  margin-left: 24px;
  margin-right: 24px;
  background: #fff;
  display: flex;
  justify-content: space-between;
}
.transformPic {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}
.upIcon {
  width: 5px;
  height: 5px;
}
</style>
